import { FC, useState } from "react"
// useState能够在函数组件中'勾入'状态
const UseStateCom: FC<any> = () => {
    // 设置状态的时候一定要传入一个新的状态
    let [num, setNum] = useState<number>(10)
    // console.log(useState(20))
    let [userInfo, setUserInfo] = useState<{ username: string, password: string, age: 30 }>({ username: "", password: "5555", age: 30 })
    //自增
    const increaseNum = () => {
        setNum(num + 1)
    }

    //自减

    const decreaseNum = () => {
        setNum(num - 1)
    }

    return (
        <fieldset>
            <legend>stateHook</legend>
            <button onClick={decreaseNum}>-</button>
            --
            <b>{num}</b>
            --
            <button onClick={increaseNum}>+</button>

            <h1>username:{userInfo.username}</h1>
            <button onClick={() => {
                setUserInfo({ ...userInfo, username: "卢本伟" })
            }}>登入</button>
        </fieldset>
    )
}

export default UseStateCom